<template>
    <div class="home">
        <div style="minHeight:6rem;">
          <div class="gun">
            <el-carousel :interval="4000" arrow="always">
                <el-carousel-item v-for="(item, index) in photo" :key="index">
                    <!-- <router-link :to="item.url"> -->
                      <h2 class="tit">{{item.title}}</h2>
                      <h1>{{item.headline}}</h1>
                      <h4>{{item.entitle}}</h4>
                      <img class="alway" :src="item.img"/>
                    <!-- </router-link> -->
                </el-carousel-item>
            </el-carousel>
          </div>
          <div class="buy">
            <router-link :to="{path:'/map',query:{lng:lng,lat:lat}}"><span>点击购买</span></router-link>
            <img src="../assets/images/icon_arrow_right_white.png"/>
          </div>
          <div class="more">
            <div class="six">
              <ul>
                <li class="liss" v-for="(item, index) in share" :key="index" :class="{active:index == shows}" >
                  <span @click="ponits(index)">{{item.name}}</span><br/><span>[{{item.times}}]</span>
                </li>
              </ul>
            </div>
            <div class="mores">
                <div class="notice">
                  更多公告
                  <img src="../assets/images/icon_arrow_right_white.png"/>
                </div>
            </div>
          </div>
        </div>
        <v-footer style="position:relative; top:2.3rem"></v-footer>
    </div>
</template>

<script>
import footer from './footer'

export default {
  data () {
    return {
      shows: false,
      lng: '114.160993',
      lat: '22.289275',
      share: [
        {
          name: '用智能助力用户实现最大价值',
          times: '2016-11-22'
        },
        {
          name: '携手云上贵州，数据驱动未来',
          times: '2016-11-22'
        },
        {
          name: '看"漂浮在空中的互联网+2018年05月17日16:20:02',
          times: '2016-11-22'
        },
        {
          name: '看"漂浮在空中的互联网+2018年05月17日16:20:02',
          times: '2016-11-22'
        },
        {
          name: '看"漂浮在空中的互联网+2018年05月17日16:20:02',
          times: '2016-11-22'
        },
        {
          name: '看"漂浮在空中的互联网+2018年05月17日16:20:02',
          times: '2016-11-22'
        }

      ],
      photo: [
        {
          id: 1,
          img: require('../assets/images/carousel1.png'),
          // url: '/shop',
          title: '新生儿疾病筛查血样标本采集卡1',
          headline: '安全 放心 品质 可靠',
          entitle: 'Blood sample collection card for neonatal disease screening.Sale and reliable quality and reliable quality.'
        },
        {
          id: 2,
          img: require('../assets/images/carousel2.png'),
          // url: '/about',
          title: '新生儿疾病筛查血样标本采集卡2',
          headline: '安全 放心 可靠',
          entitle: 'Blood sample collection card for neonatal disease screening.'
        },
        {
          id: 3,
          img: require('../assets/images/carousel3.png'),
          // url: '/my',
          title: '新生儿疾病筛查血样标本采集卡3',
          headline: '安全 放心 可靠',
          entitle: 'Blood sample collection card for neonatal disease screening.'
        },
        {
          id: 4,
          img: require('../assets/images/carousel1.png'),
          // url: '/',
          title: '新生儿疾病筛查血样标本采集卡4',
          headline: '安全 放心 可靠',
          entitle: 'Blood sample collection card for neonatal disease screening.'
        }
      ],
      redirect: true
    }
  },
  methods: {
    ponits (index) {
      this.shows = index
      console.log('show', this.shows)
    }
  },
  components: {
    'v-footer': footer
  }
}
</script>

<style scoped lang="less">
@import "../assets/less/home.less";
</style>
